<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>JSON转XML,XML转JSON - 在线工具 - DevTools</title>
    <meta name="keywords" content="JSON转XML,XML转JSON">
    <meta name="description" content="在线JSON转XML,XML转JSON工具,JSON转XML,XML转JSON">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/static/css/style.css" type="text/css">
    <link href="https://cdn.bootcss.com/highlight.js/9.15.9/styles/idea.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/5.10.0-11/css/all.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 100%;
        }

        pre {
            overflow: auto
        }
    </style>
</head>
<body>
{{template "aside"}}
<main>
    <div class="container">
        <h1>JSON转XML,XML转JSON</h1>
        <div class="flex mt1">
            <div class="editarea" onpaste="setTimeout(toXml, 1)">
                <label>JSON</label>
                <pre id="area_json" class="textarea fullHeight fixed-size" contenteditable="true"></pre>
            </div>
            <div class="mid-menus">
                <div>
                    <button class="button primary" onclick="toXml()">
                        <span>转XML</span>
                        <i class="fa fa-arrow-right"></i>
                    </button>
                    <button class="button primary" onclick="toJson()">
                        <i class="fa fa-arrow-left"></i>
                        <span>转JSON</span>
                    </button>
                    <button class="button" data-clipboard-action="copy" data-clipboard-target="#area_json">复制JSON
                    </button>
                    <button class="button" data-clipboard-action="copy" data-clipboard-target="#area_xml">复制XML</button>
                    <button class="button" onclick="cleanup()">清空</button>
                </div>
            </div>
            <div class="editarea" onpaste="setTimeout(toJson, 1)">
                <label>XML</label>
                <pre id="area_xml" class="textarea fullHeight fixed-size" contenteditable="true"></pre>
            </div>
        </div>
    </div>
</main>
<script src="https://cdn.bootcss.com/highlight.js/9.15.9/highlight.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.15.9/languages/json.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.15.9/languages/xml.min.js"></script>
<script src="https://cdn.bootcss.com/fast-xml-parser/3.12.16/parser.min.js"></script>
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<script>
    let area_json = document.getElementById('area_json');
    let area_xml = document.getElementById('area_xml');

    function toXml() {
        let json = area_json.innerText;
        if (json) {
            let jsonObj = JSON.parse(json);
            let xml = new parser.j2xParser().parse(jsonObj);
            area_xml.innerHTML = hljs.highlight("xml", formatXml(xml)).value;
            area_json.innerHTML = hljs.highlight("json", json).value;
        }
    }

    function toJson() {
        let xml = area_xml.innerText;
        if (xml) {
            let result = parser.validate(xml);
            if (result) {
                let json = JSON.stringify(parser.parse(xml), null, 2);
                area_json.innerHTML = hljs.highlight("json", json).value;
                area_xml.innerHTML = hljs.highlight("xml", xml).value;
            } else {
                alert(result.err)
            }
        }
    }

    function formatXml(xml) {
        let formatted = '';
        let reg = /(>)(<)(\/*)/g;
        xml = xml.replace(reg, '$1\r\n$2$3');
        let pad = 0;

        xml.split('\r\n').forEach(function (node) {
            let indent = 0;
            if (node.match(/.+<\/\w[^>]*>$/)) {
                indent = 0;
            } else if (node.match(/^<\/\w/)) {
                if (pad !== 0) {
                    pad -= 1;
                }
            } else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
                indent = 1;
            } else {
                indent = 0;
            }

            let padding = '';
            for (let i = 0; i < pad; i++) {
                padding += '  ';
            }

            formatted += padding + node + '\r\n';
            pad += indent;
        });
        return formatted;
    }

    function cleanup() {
        area_json.innerHTML = '';
        area_xml.innerHTML = '';
    }

    new ClipboardJS('.button').on('success', function () {
        alert('复制成功')
    }).on('error', function () {
        alert('复制失败,请手动复制')
    });
</script>
</body>
</html>